<template>
  <div class="hotlist">
    <div class="list">
      <div v-for="i in data_list" :key="i.id" class="outer_layer">
        <div class="left f-l">
          <imgBox
            :msg="{
                src:i.img,
                c:0,
                w:'117px',
                imgw:'117px', 
                imgh:'88px', 
                h:'88px',
                url:'/strategy/page?id='+i.id
                }"
          ></imgBox>
        </div>
        <div class="right f-l">
          <h3>{{i.title}}</h3>
          <span>{{i.intro}}</span>
        </div>
      </div>
    </div>
 <div style="    text-align: right;">
    <el-pagination
      :page-size="page_size"
      :total="total"
      :current-page="pageNum"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
    ></el-pagination>
 </div>
  </div>
</template>

<script>
import imgBox from "@/components/imgBox/imgBox";
export default {
  data() {
    return {
      imgdata: "",
      page_size: 20,
      total: 0,
      pageNum: 1,
      data_list: []
    };
  },
  components: {
    imgBox
  },
  created: function() {
    this.upPage(1);
  },
  methods: {
    handleCurrentChange(page) {
      this.upPage(page);
    },
    upPage(page) {
      var d = { page: page, size: this.page_size };
      this.$api.strategyAPI.get_strategy(d).then(res => {
        this.total = res.data.data.count;
        this.data_list = res.data.data.results;
      });
    }
  }
};
</script>

<style lang="scss">
.imgBox {
  margin: 5px;
}
.hotlist {
  .el-pagination {
    
  }
  .list::after {
    content: "";
    display: block;
    clear: both;
  }
}
.outer_layer {
  height: 88px;
  width: 50%;
  padding: 5px 0px 5px 0px;

  float: left;

  .left {
    height: 88px;
    width: 117px;
  }
  .right {
    width: auto;
    padding-left: 10px;
    h3 {
      margin: 10px;
    }
    span {
      margin: 10px;
    }
  }
}
</style>